<template>
<span style="color: green;font-size: 1.5rem;height: 2rem;line-height: 2rem;font-weight: 800">ISSUE</span>
  <el-card v-for="item in issueList" :key="item.id" shadow="never">
    <template #header>
      <div style="display: flex;justify-content: space-between">
        <span>{{item.name}}</span>
        <span>{{getTime(item.createdAt)}}</span>
      </div>
    </template>
    <span>{{item.content}}</span>
  </el-card>
  <div v-if="!issueList || issueList.length === 0" style="color: #999999;padding:0.5rem 0 0.5rem 0.5rem">这篇文章当属精品，可惜没评论</div>
  <div class="issue-main">
    <el-input
        class="issue-content"
        type="textarea"
        :disabled="!editable"
        autosize
        :placeholder="editable?'提出issue，一起交流吧':'登录才能提出issue'"
        v-model="issue">
    </el-input>
    <div class="issue-login">
      <div class="issue-tip" v-if="!editable">使用码云账号登录后提出issue</div>
      <div class="issue-tip" v-if="editable">当前用户-{{name}}- <a class="logout" @click="LogOut">退出登录</a></div>
      <el-button @click="login" v-if="!editable">使用码云登录</el-button>
      <el-button @click="handle" v-if="editable">发送issue</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent ,ref, reactive, toRefs, onMounted, inject} from 'vue'
import {IIssue} from "@/interface/issue";
import {getAllByArticle, addIssue} from "@/api/issue";
import {ElMessage} from "element-plus";

export default defineComponent({
  name: "Issue",
  props: {
    articleId: {
      type: Number
    }
  },
  setup(props) {
    const issue = ref('')
    const editable = ref(false)
    const name = ref('')
    const localName = localStorage.getItem('issueName')
    const state = reactive<{issueList: IIssue[]}>({
      issueList: []
    })
    if(localName) {
      name.value = localName
      editable.value = true
    }
    const login = () => {
      editable.value = true
      const currentUri = 'http://47.97.228.7:3001/oauth/giteeRedirectUri'
      window.location.href = 'https://gitee.com/oauth/authorize?client_id=c229af24bca8c1ac45a393b2495ddfeaed8fc4605b4ca8ccc9948058590fd5c8&redirect_uri='+currentUri+'&response_type=code'
    }
    const LogOut = () => {
      localStorage.removeItem('issueName')
      editable.value = false
      issue.value = ''
    }
    const refresh = inject<Function>('reload')
    const handle = () => {
      addIssue(name.value, issue.value, props.articleId).then(res => {
        if(res.data.code === 100) {
          ElMessage.success('评论成功')
          refresh && refresh()
        }
      })
    }
    onMounted(() => {
      getAllByArticle(props.articleId).then(res => {
        state.issueList = res.data.data
      })
    })
    const getTime = time => {
      time = time.slice(0,9) + ' ' + time.slice(11,19)
      return time
    }
    return {
      name,
      LogOut,
      login,
      handle,
      editable,
      issue,
      getTime,
      ...toRefs(state)
    }
  }
})
</script>

<style scoped>
.issue-main {
  margin-top: 0.5rem;
  padding: 1rem 0 1rem 0;
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}
.issue-login {
  display: flex;
  justify-content: space-between;
  padding-top: 0.5rem;
  color: green;
}
.logout {
  cursor: pointer;
  text-decoration: underline;
}
.el-card {
  margin-bottom: 1rem;
}
/deep/ .el-card__header {
  padding: 0.5rem;
}
</style>
